<template>
  <div class="related-wrap">
    <van-loading v-if="!hasBangumis" class="loading" :color="rootThemeColor" type="spinner">加载中...</van-loading>
    <template v-if="hasBangumis">
      <div class="title">更多推荐</div>
      <bangumi-item
        v-for="item in bangumis"
        :key="item.season_id"
        :id="item.season_id"
        :title="item.title"
        :coverPath="item.new_ep.cover || item.cover"
        :view="item.stat.view"
        :danmaku="item.stat.danmaku"
        :follow="item.stat.follow"
        :allParams="item"
        layout="ltr"
        @select="toBangumi"
      >
      </bangumi-item>
    </template>
  </div>
</template>

<script>
import { Loading as VanLoading } from 'vant'
import BangumiItem from './BangumiItem.vue'
export default {
  name: 'BangumiRelated',
  components: {
    VanLoading,
    BangumiItem
  },
  inject: ['rootThemeColor'],
  props: {
    bangumis: {
      type: Array
    }
  },
  computed: {
    hasBangumis () {
      return this.bangumis.length > 0
    }
  },
  methods: {
    toBangumi (season) {
      this.$router.push({ name: 'bangumi', params: { id: 'ss' + season.season_id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .loading{
    display: flex;
    justify-content: center;
  }
  .related-wrap{
    padding: {
      left: 5px;
      right: 5px;
    };
    .title{
      padding: {
        left: 5px;
        right: 5px;
      };
      height: 44px;
      line-height: 44px;
      font-size: 15px;
      font-weight: 700;
      color: $color-text-primary;
    }
  }
</style>
